<template>
  <div class="myMerchant">
    <!-- 我的商户 -->
    <div class="query">
      <div class="queryBtn">
        <el-button size="mini" type="primary" @click="handleToAddUser">新增</el-button>
        <el-button
          size="mini"
          style="border: none;color: #626366;font-size: 14px;background-color: #f1f1f1"
          @click="handleShowFiltrate"
        >
          <i class="iconshalou"></i>高级查询
        </el-button>
      </div>
      <div class="search">
        <el-input
          v-model="search"
          size="mini"
          class="searchInput"
          placeholder="输入商户ID/商户名称/店铺名称/店铺账号/推荐人"
          clearable
          @keyup.enter.native="handleSearch(search)"
        ></el-input>
        <el-button
          size="mini"
          style="padding: 8px 20px;margin-left: 10px;border: none;color: #626366;background-color: #f1f1f1"
          @click="handleSearch(search)"
        >搜索</el-button>
      </div>
    </div>
    <!-- 高级查询内容 -->
    <el-collapse-transition>
      <div class="filtrate" v-show="!isShow">
        <el-form ref="form" :model="form" label-width="110px">
          <el-form-item label="已开通支付">
            <el-radio-group v-model="form.dec_payment_method" size="mini">
              <el-radio-button label="-1">全部</el-radio-button>
              <el-radio-button label="101">是</el-radio-button>
              <el-radio-button label="102">否</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="所选版本">
            <el-radio-group v-model="form.version" size="mini" @change="handleChooseId">
              <el-radio-button value="0" label="0">全部</el-radio-button>
              <el-radio-button value="1" label="1">高级试用版</el-radio-button>
              <el-radio-button value="2" label="2">原高级版</el-radio-button>
              <el-radio-button value="3" label="3">旗舰版</el-radio-button>
              <el-radio-button value="4" label="4">尊享版</el-radio-button>
              <el-radio-button
                v-for="(item, index) in versions"
                :key="index"
                :value="item.sv_versionname"
                :label="item"
              >{{item.sv_versionname}}</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="版本时限" v-if="timeLimit">
            <el-radio-group v-model="form.sv_versionid" size="mini" @change="handleChangeTime">
              <el-radio-button label="0">全部</el-radio-button>
              <el-radio-button label="3">年</el-radio-button>
              <el-radio-button label="5">终身</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="店铺状态">
            <el-radio-group v-model="form.status" size="mini">
              <el-radio-button label="-2">全部</el-radio-button>
              <el-radio-button label="0">正常</el-radio-button>
              <el-radio-button label="-1">禁用</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="总店&分店">
            <el-radio-group v-model="form.storetype" size="mini">
              <el-radio-button label="0">全部</el-radio-button>
              <el-radio-button label="1">总店</el-radio-button>
              <el-radio-button label="2">分店</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否连锁">
            <el-radio-group v-model="form.multipletype" size="mini">
              <el-radio-button label="0">全部</el-radio-button>
              <el-radio-button label="1">是</el-radio-button>
              <el-radio-button label="2">否</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="注册时间">
            <div class="block-start">
              <el-radio-group v-model="form.register" size="mini" @change="hangleChangeTime1">
                <el-radio-button label="1">全部</el-radio-button>
                <el-radio-button label="2">7天内</el-radio-button>
                <el-radio-button label="3">15天内</el-radio-button>
                <el-radio-button label="4">一个月内</el-radio-button>
                <el-radio-button label="5">三个月内</el-radio-button>
                <el-radio-button label="6">一年内</el-radio-button>
              </el-radio-group>
              <el-date-picker
                v-model="form.register"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="mini"
                style="margin-left: 12px"
                @change="handleChangeRegister"
              ></el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="到期时间">
            <div class="block-start">
              <el-radio-group v-model="form.expire" size="mini" @change="hangleChangeTime">
                <el-radio-button label="1">已过期</el-radio-button>
                <el-radio-button label="2">7天内</el-radio-button>
                <el-radio-button label="3">15天内</el-radio-button>
                <el-radio-button label="4">一个月内</el-radio-button>
                <el-radio-button label="5">三个月内</el-radio-button>
                <el-radio-button label="6">一年内</el-radio-button>
              </el-radio-group>
              <el-date-picker
                v-model="form.expire"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="mini"
                @change="handleChangeDate"
              ></el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="最后登录时间">
            <div class="block-between">
              <el-radio-group v-model="form.lastloginday" size="mini">
                <el-radio-button label="-1">全部</el-radio-button>
                <el-radio-button label="0">今日</el-radio-button>
                <el-radio-button label="1">一日内</el-radio-button>
                <el-radio-button label="3">三日内</el-radio-button>
                <el-radio-button label="7">近七天</el-radio-button>
                <el-radio-button label="30">一个月内</el-radio-button>
                <el-radio-button label="90">三个月内</el-radio-button>
                <el-radio-button label="365">一年内</el-radio-button>
              </el-radio-group>
              <el-button type="primary" size="mini" @click="handleFiltrate(form)">筛选</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-collapse-transition>
    <!-- 表格内容 -->
    <el-table
      :data="tableData"
      class="fromContent"
      style="font-size: 14px"
      @cell-dblclick="handleCopy"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.8)"
    >
      <el-table-column width="50px" align="center" type="index" label="序号"></el-table-column>
      <!-- 店铺ID -->
      <el-table-column align="center" label="店铺ID" min-width="120">
        <template slot-scope="scope">
          <div class="contentToDraw">
            <span>{{ scope.row.user_id}}</span>
            <span
              class="dec"
              :class="scope.row.isStore === '分' ? 'fendian' : ''"
            >{{scope.row.isStore}}</span>
          </div>
        </template>
      </el-table-column>
      <!-- 店铺名称 -->
      <el-table-column align="center" :show-overflow-tooltip="true" prop="sv_us_name" label="店铺名称"></el-table-column>
      <!-- 商户姓名 -->
      <el-table-column align="center" :show-overflow-tooltip="true" prop="sv_ul_name" label="商户姓名"></el-table-column>
      <!-- 店铺账号 -->
      <el-table-column align="center" label="店铺账号" min-width="180">
        <template slot-scope="scope">
          <span
            @click="handleToMerchantDetails(scope.$index, scope.row)"
            style="color: #0094ff;cursor: pointer"
          >{{ scope.row.sv_ul_mobile }}</span>
          <el-tooltip class="item" effect="dark" placement="top">
            <div slot="content">该用户已经使用{{scope.row.timing}}天</div>
            <span class="timing">{{scope.row.timing}}天</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <!-- 版本信息 -->
      <el-table-column align="center" min-width="140" label="软件版本">
        <template slot-scope="scope">
          <span>{{ scope.row.sv_versionname }}</span>
          <el-tooltip class="item" effect="dark" placement="top">
            <div slot="content">该用户已成功购买店铺{{scope.row.buyshopnumber}}间</div>
            <span class="timing">店X{{scope.row.buyshopnumber}}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <!-- 行业类型 -->
      <el-table-column align="center" width="100" prop="sv_uit_name" label="行业类型"></el-table-column>
      <!-- 注册时间 -->
      <el-table-column
        min-width="125"
        align="center"
        prop="sv_ul_regdate"
        :formatter="dateFormat"
        label="注册时间"
      ></el-table-column>
      <!-- 到期时间 -->
      <el-table-column
        align="center"
        min-width="125"
        prop="sv_versionexpiration"
        label="到期时间"
        :formatter="dateFormat"
      ></el-table-column>
      <!-- 最后登录时间 -->
      <el-table-column
        align="center"
        min-width="125"
        prop="sv_ul_lastlogintime"
        label="最后登录"
        :formatter="dateFormat"
      ></el-table-column>
      <!-- 推荐人 -->
      <el-table-column align="center" min-width="120" prop="sv_us_reference" label="推荐人"></el-table-column>
      <!-- 开通服务 -->
      <el-table-column align="center" fixed="right" label="操作" min-width="160">
        <!-- scoped.row 指的是当前行的数据 -->
        <template slot-scope="scope">
          <div class="operate">
            <span @click="handleEdit(scope.$index, scope.row)">增值</span>
            <span @click="handleVersionUp(scope.$index, scope.row)">升级</span>
            <span @click="handleMsgRecharge(scope.$index, scope.row)">短信</span>
          </div>
          <!-- <el-tooltip class="item" effect="dark" content="增值服务" placement="top">
            <i
              @click="handleEdit(scope.$index, scope.row)"
              class="iconBtn iconzengzhifuwu"
              style="color: #409eff"
            ></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="版本升级" placement="top">
            <i
              @click="handleVersionUp(scope.$index, scope.row)"
              class="iconBtn iconupload"
              style="color: orangered"
            ></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="购买短信" placement="top">
            <i
              @click="handleMsgRecharge(scope.$index, scope.row)"
              class="iconBtn iconduanxinchongzhi"
              style="color: #67c23a"
            ></i>
          </el-tooltip>-->
        </template>
      </el-table-column>
    </el-table>
    <!-- 这个是分页器 -->
    <Pagination
      :total="total"
      :pageIndex="pageIndex"
      :pageSize="pageSize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    ></Pagination>
    <!-- 充值输入框 -->
    <div class="recallDetail" v-show="rechargeInput">
      <div class="content">
        <h3 class="title" style="font-size: 16px;margin-top: -20px;margin-bottom: 20px">短信购买</h3>
        <div class="close" @click="rechargeInput = false">
          <i class="fa fa-times" aria-hidden="true"></i>
        </div>
        <div class="rechargeName" style="margin-left: 15px;margin-bottom: 25px">
          店铺ID：
          <el-input v-model="user_id" clearable style="width: 178px" size="mini" disabled></el-input>
        </div>
        <div class="rechargeName">
          购买条数：
          <el-input
            placeholder="输入购买条数"
            v-model="sms_mealnum"
            clearable
            style="width: 178px"
            size="mini"
            type="number"
          ></el-input>
        </div>
        <div class="remark" style="margin: 25px 0">
          实收代币：
          <el-input
            placeholder="输入代币备注"
            v-model="sms_amount"
            type="number"
            style="width: 178px"
            size="mini"
          ></el-input>
        </div>
        <div class="remark" style="margin: 25px 0">
          备注说明：
          <el-input
            placeholder="输入备注说明"
            v-model="sms_remark"
            clearable
            style="width: 178px"
            size="mini"
          ></el-input>
        </div>
        <el-button type="primary" size="small" @click="onRecyc">确定</el-button>
        <el-button size="small" @click="rechargeInput = false">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
export default {
  data() {
    return {
      // 表格数据
      tableData: [],
      loading: true,
      // 表格每一列数据的id
      id: [],
      // 在线时长
      timing: "",
      // 搜索的数据绑定
      search: "",
      // 高级查询的数据
      form: {
        version: "",
        register: "",
        expire: "",
        status: -2,
        MsgNo: -1,
        name: this.search,
        nreg_sdate: "", // 注册开始时间
        nreg_edate: "", // 注册结束时间
        exp_sdate: "", // 到期开始时间
        exp_edate: "", // 到期结束时间
        sv_versionid: "", // 选择版本id
        code: "", // 选择版本编号
        sv_versionname: "", // 选择版本
        lastloginday: "",
        storetype: "",
        multipletype: "",
        dec_payment_method: "",
        nearexpiration: "",
        sub_distributor_id: ""
      },
      timeLimit: false,
      oldCOde: "", // 原有版本编号
      // 响应筛选展开与否
      isShow: true,
      // 软件版本
      versions: [],
      // 增值服务
      servicesData: [],
      // 短信充值数据
      user_id: "",
      sms_mealnum: null,
      sms_amount: "",
      sms_remark: "",
      // 输入框默认隐藏
      rechargeInput: false,
      // 分页器的数据
      total: 0, // 总条数
      pageIndex: 1, // 当前页
      pageSize: 10, // 每页数量
      url: "",
      // 身份令牌
      myToken: ""
    };
  },
  components: {
    Pagination
  },
  methods: {
    // 初始化函数
    init() {
      // 格式化时间
      this.timeFormatting = this.utils.timeFormatting();
      // // 获取上个月一号至今的注册数据
      // var nowdays = new Date();
      // var year = nowdays.getFullYear();
      // var month = nowdays.getMonth();
      // if (month == 0) {
      //   month = 12;
      //   year = year - 1;
      // }
      // if (month < 10) {
      //   month = "0" + month;
      // }
      // this.form.nreg_sdate = year + "-" + month + "-" + "01";
      // this.form.nreg_sdate = new Date(this.form.nreg_sdate).Format(
      //   "yyyy-MM-dd hh:mm:ss"
      // );
      // 获取令牌
      this.myToken = sessionStorage.getItem("myToken");
      // 初始化列表
      this.getOrderData();
      if (this.$route.query.x == "1") {
        this.$router.push("myMerchant");
      }
      // 版本号信息
      this.$api
        .accordingToIdGetVersion("1,3", false, this.myToken)
        .then(res => {
          this.versions = res.list.map(v => {
            return {
              ...v
            };
          });
        });
    },
    // 点击单元格复制内容
    handleCopy(row, column, cell) {
      let range = document.createRange();
      range.selectNodeContents(cell);
      var selection = document.getSelection();
      selection.removeAllRanges();
      selection.addRange(range);
      document.execCommand("copy");
      this.$message({
        type: "success",
        message: "复制成功"
      });
    },
    // 获取订单列表
    getOrderData() {
      this.loading = true;
      const urlParameter = {
        status: this.form.status,
        MsgNo: this.form.MsgNo,
        nreg_sdate: this.form.nreg_sdate,
        nreg_edate: this.form.nreg_edate,
        exp_sdate: this.form.exp_sdate,
        exp_edate: this.form.exp_edate,
        sv_versionid: this.form.sv_versionid,
        sv_versionname: this.form.sv_versionname,
        lastloginday: this.form.lastloginday,
        storetype: this.form.storetype,
        multipletype: this.form.multipletype,
        dec_payment_method: this.form.dec_payment_method,
        nearexpiration: this.form.nearexpiration,
        sub_distributor_id: this.form.sub_distributor_id,
        code: this.form.code
      };
      this.$api
        .getBusinesslistings(
          this.pageIndex,
          this.pageSize,
          this.search.trim(),
          urlParameter,
          this.myToken
        )
        .then(res => {
          this.loading = false;
          this.total = res.total;
          if (!res.dataList) {
            this.tableData = res.dataList;
            return;
          }
          this.tableData = res.dataList.map((v, i) => {
            this.timing = Math.floor(
              (new Date().getTime() - new Date(v.sv_ul_regdate).getTime()) /
                86400000
            );
            if (this.timing < 0) {
              this.timing = 0;
            }
            // 没有记录的时间显示为空
            if (v.sv_ul_lastlogintime.substring(0, 1) == "0") {
              v.sv_ul_lastlogintime = null;
            }
            if (v.sv_versionexpiration.substring(0, 1) == "0") {
              v.sv_versionexpiration = null;
            }
            if (!v.isStore) {
              // 判断总分店
              v.isStore = "总";
            } else {
              v.isStore = "分";
            }
            this.id = v.user_id;
            return {
              ...v,
              timing: this.timing
            };
          });
        });
      return;
      this.$axios({
        url: this.urlParameter
      }).then(res => {
        this.loading = false;
        const { dataList, total } = res.data.values;
        this.total = total;
        // console.log(res);
        if (dataList == null) {
          this.tableData = dataList;
          return;
        }
        this.tableData = dataList.map((v, i) => {
          this.timing = Math.floor(
            (new Date().getTime() - new Date(v.sv_ul_regdate).getTime()) /
              86400000
          );
          if (this.timing < 0) {
            this.timing = 0;
          }
          // 没有记录的时间显示为空
          if (v.sv_ul_lastlogintime.substring(0, 1) == "0") {
            v.sv_ul_lastlogintime = null;
          }
          if (v.sv_versionexpiration.substring(0, 1) == "0") {
            v.sv_versionexpiration = null;
          }
          if (!v.isStore) {
            // 判断总分店
            v.isStore = "总";
          } else {
            v.isStore = "分";
          }
          this.id = v.user_id;
          return {
            ...v,
            timing: this.timing
          };
        });
      });
    },
    //时间格式化
    dateFormat(row, column) {
      var date = row[column.property];
      if (!date) {
        return "";
      }
      return this.$moment(date).format("YY-MM-DD HH:mm");
    },
    // 分页器的方法
    handleSizeChange(val) {
      this.pageSize = val;
      this.getOrderData();
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getOrderData();
    },
    // 搜索功能
    handleSearch(val) {
      this.pageIndex = 1;
      this.getOrderData();
    },
    // 高级查询
    handleShowFiltrate(val) {
      this.isShow = !this.isShow;
    },
    // 进行筛选
    handleFiltrate(val) {
      this.form = val;
      this.pageIndex = 1;
      this.getOrderData();
    },
    // 选择版本id
    handleChooseId(val) {
      this.form.code = "";
      this.form.sv_versionid = "";
      this.timeLimit = false;
      if (val == 0) {
        this.form.sv_versionname = "";
      } else if (val == 1) {
        this.form.sv_versionid = 2;
        this.form.sv_versionname = "高级试用版";
      } else if (val == 2) {
        this.form.sv_versionid = 4;
        this.form.sv_versionname = "高级版";
      } else if (val == 3) {
        this.form.sv_versionid = 4;
        this.form.sv_versionname = "旗舰版";
      } else if (val == 4) {
        this.form.sv_versionid = 5;
        this.form.sv_versionname = "尊享版";
      } else {
        this.timeLimit = true;
        this.form.sv_versionname = val.sv_versionname;
        this.form.code = val.sv_version_code;
        this.oldCOde = this.form.code; // 保留原有的版本编号
      }
    },
    // 选择版本购买时限
    handleChangeTime(val) {
      this.form.code = "";
      if (val == 0) {
        this.form.code = this.oldCOde;
      } else {
        // 判断是按年3还是按终身5
        if (this.form.sv_versionname == "高级版") {
          this.form.sv_versionname = "至尊版";
        }
        this.form.sv_versionid = val;
      }
    },
    // 格式化注册时间
    handleChangeRegister(val) {
      if (val) {
        this.form.nreg_sdate = new Date(val[0]).Format("yy-MM-dd hh:mm:ss");
        this.form.nreg_edate = new Date(val[1]).Format("yy-MM-dd hh:mm:ss");
      } else {
        this.form.nreg_sdate = "";
        this.form.nreg_edate = "";
      }
    },
    // 注册时间筛选
    hangleChangeTime1(val) {
      this.form.nreg_edate = "";
      if (val == 1) {
        this.form.nreg_sdate = "";
      } else if (val == 2) {
        this.form.nreg_sdate = new Date(
          new Date().getTime() - 86400000 * 7
        ).Format("yyyy-MM-dd hh:mm:ss");
      } else if (val == 3) {
        this.form.nreg_sdate = new Date(
          new Date().getTime() - 86400000 * 15
        ).Format("yyyy-MM-dd hh:mm:ss");
      } else if (val == 4) {
        this.form.nreg_sdate = new Date(
          new Date().getTime() - 86400000 * 30
        ).Format("yyyy-MM-dd hh:mm:ss");
      } else if (val == 5) {
        this.form.nreg_sdate = new Date(
          new Date().getTime() - 86400000 * 90
        ).Format("yyyy-MM-dd hh:mm:ss");
      } else if (val == 6) {
        this.form.nreg_sdate = new Date(
          new Date().getTime() - 86400000 * 365
        ).Format("yyyy-MM-dd hh:mm:ss");
      }
    },
    // 格式化到期时间
    handleChangeDate(val) {
      if (val) {
        this.form.exp_sdate = new Date(val[0]).Format("yy-MM-dd hh:mm:ss");
        this.form.exp_edate = new Date(val[1]).Format("yy-MM-dd hh:mm:ss");
      } else {
        this.form.exp_sdate = "";
        this.form.exp_edate = "";
      }
    },
    // 到期时间筛选
    hangleChangeTime(val) {
      this.form.exp_sdate = new Date().Format("yyyy-MM-dd hh:mm:ss");
      if (val == 1) {
        this.form.exp_sdate = "2017-01-01 00:00:00";
        this.form.exp_edate = new Date(new Date().getTime() - 86400000).Format(
          "yyyy-MM-dd hh:mm:ss"
        );
      } else if (val == 2) {
        this.form.exp_edate = new Date(
          new Date().getTime() + 86400000 * 7
        ).Format("yyyy-MM-dd hh:mm:ss");
      } else if (val == 3) {
        this.form.exp_edate = new Date(
          new Date().getTime() + 86400000 * 15
        ).Format("yyyy-MM-dd hh:mm:ss");
      } else if (val == 4) {
        this.form.exp_edate = new Date(
          new Date().getTime() + 86400000 * 30
        ).Format("yyyy-MM-dd hh:mm:ss");
      } else if (val == 5) {
        this.form.exp_edate = new Date(
          new Date().getTime() + 86400000 * 90
        ).Format("yyyy-MM-dd hh:mm:ss");
      } else if (val == 6) {
        this.form.exp_edate = new Date(
          new Date().getTime() + 86400000 * 365
        ).Format("yyyy-MM-dd hh:mm:ss");
      }
    },
    // 跳转到商户详情
    handleToMerchantDetails(i, v) {
      const user_id = v.user_id;
      const isStore = v.isStore;
      this.$router.push({
        path: "merchantDetails",
        query: {
          user_id,
          isStore
        }
      });
    },
    // 跳转到增值服务
    handleEdit(i, v) {
      if (v.sv_ul_status == -1) {
        this.$message({
          type: "warning",
          message: "请启用后再进行操作"
        });
        return;
      }
      const headQuartersid = v.headQuartersid;
      const sv_us_name = v.sv_us_name;
      const user_id = v.user_id;
      const isStore = v.isStore;
      this.$router.push({
        path: "addedServices",
        query: {
          sv_us_name,
          user_id,
          isStore
        }
      });
    },
    // 版本升级
    handleVersionUp(i, v) {
      if (v.isStore == "分") {
        this.$message({
          type: "warning",
          message: "分店无法直接升级！"
        });
        return;
      } else if (v.sv_ul_status == -1) {
        this.$message({
          type: "warning",
          message: "请启用后再进行操作"
        });
        return;
      }
      const user_id = v.user_id;
      const sv_versionid = v.sv_versionid;
      this.$router.push({
        path: "versionUp1",
        query: {
          user_id,
          sv_versionid
        }
      });
    },
    // 跳转到新增商户
    handleToAddUser() {
      this.$router.push("addUser");
    },
    // 短信充值
    handleMsgRecharge(i, v) {
      if (v.sv_ul_status == -1) {
        this.$message({
          type: "warning",
          message: "请启用后再进行操作"
        });
        return;
      }
      // 激活显示输入框
      this.rechargeInput = !this.rechargeInput;
      this.user_id = v.user_id;
    },
    // 短信充值的操作
    onRecyc() {
      // 充值数不能为0
      if (this.sms_mealnum == "") {
        this.$message.error("请输入充值数量");
        return;
      }
      // 充值条数为数值
      this.$api
        .SmsHandle(
          this.user_id,
          this.sms_mealnum,
          this.sms_amount,
          this.sms_remark,
          0,
          this.myToken
        )
        .then(res => {
          if (res) {
            this.$message({
              type: "success",
              message: "充值成功"
            });
            this.sms_mealnum = null;
            this.sms_amount = "";
            this.sms_remark = "";
          } else {
            this.$message.error("充值失败，短信余额不足");
          }
          this.rechargeInput = false;
        });
    }
  },
  activated() {
    if (this.$route.query.x == 1) {
      this.$router.replace("myMerchant");
      this.getOrderData();
    } else if (this.$route.query.x == 2) {
      this.$router.replace("myMerchant");
      this.pageIndex = 1;
      this.getOrderData();
    }
  },
  mounted() {
    // 初始化函数
    this.init();
  }
};
</script>

<style lang="less" scoped>
@deep: ~">>>";
.myMerchant {
  background-color: #fff;
  padding: 20px;
  // 搜索部分的样式
  .query {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .search {
      display: flex;
      .searchInput {
        width: 320px;
        margin-right: 10px;
      }
    }
  }
  .filtrate {
    margin: 20px 0;
    margin-top: 0;
    background-color: #f1f1f1;
    .el-radio-button {
      margin-right: 10px;
    }
    .block-start {
      display: flex;
      align-items: baseline;
    }
    .block-between {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-right: 20px;
    }
  }
  .operate {
    color: #0094ff;
    cursor: pointer;
  }
  // 筛选的每一项
  .filtrate @{deep} .el-form-item {
    margin-bottom: 0;
  }
  // 筛选项的标题
  .filtrate @{deep} .el-form-item__label {
    color: #000;
    font-weight: 600;
  }
  // 筛选项的内容
  .filtrate @{deep} .el-radio-button__inner {
    border: 1px solid #f1f1f1;
    background-color: #f1f1f1;
    color: #626366;
    font-size: 14px;
  }
  // 筛选项选中内容
  .filtrate @{deep} .is-active .el-radio-button__inner {
    background-color: #f1f1f1;
    border: 1px solid #439fff;
    box-shadow: unset;
    color: #666;
    border-radius: 4px;
  }
  // 表格的样式
  .fromContent {
    margin: 0 auto 40px;
    .serviceIcon {
      cursor: pointer;
      font-size: 12px;
      margin-right: 2px;
      padding: 3px 10px;
      color: #fff;
      text-align: center;
      border-radius: 4px;
      box-sizing: border-box;
      background-color: #3399ff;
    }
    .tipInfo {
      position: absolute;
      top: 0;
      right: 70px;
    }
    // 总分店的样式
    .dec {
      background-color: #3399ff;
      color: #fff;
      padding: 0px 8px;
      &.fendian {
        background-color: #ff6600;
      }
    }
    .timing {
      background-color: #67c23a;
      color: #fff;
      cursor: pointer;
      padding: 3px 8px;
      font-size: 12px;
      width: max-content;
      margin: 0 auto;
    }
  }
  .iconBtn {
    font-size: 24px;
    padding: 1px 3px;
    cursor: pointer;
    border-radius: 6px;
  }
  // 更改自带样式
  .fromContent @{deep} .serveBox.el-button {
    border: none;
    padding: 0;
    margin-right: 5px;
  }
  .fromContent
    @{deep}
    .el-table__body-wrapper.is-scrolling-none
    ~ .el-table__fixed-right {
    z-index: 0;
  }
  .fromContent @{deep} .el-table__fixed-right {
    z-index: 0;
  }
  // 这个是弹出框的样式
  .recallDetail {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    .content {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      padding: 50px 20px;
      box-sizing: border-box;
      border-radius: 10px;
      text-align: center;
      width: 350px;
      .comboName {
        text-align: left;
        text-indent: 20px;
        color: #666;
        margin: 10px 0;
      }
    }
    .close {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
      color: #666;
      font-size: 20px;
    }
  }
}
// 更改表头颜色
.myMerchant @{deep} .el-table th {
  background-color: #fafafa;
  color: #252525;
  font-weight: 100;
}
.myMerchant @{deep} .el-table::before {
  height: 0;
}
.myMerchant @{deep}.el-button + .el-button {
  margin-left: 0;
}
</style>